<template>
	<view>
		<NavBar text='缴纳押金' />
		<view style="width: 100%; height: 123rpx;"></view>
		<view class="zy">
			<view style="width: 90%; margin:0 auto;">
				<view class="zy_header">
					<view class="flx">
						<view class="flx1">
							<view style="font-size: 32rpx; font-weight: 600;">{{userinfo.name}}</view>
							<view class="flx1">
								<view style="margin-left: 20rpx;">{{userinfo.sex}}</view>
								<view style="margin-left: 10rpx;">{{userinfo.age}}岁</view>
							</view>
						</view>
						<view>住院号：{{userinfo.number}}</view>
					</view>
				</view>
				<view class="flx rr_style">
					<view class="zy_header_left">押金总额：</view>
					<view style="font-size: 32rpx; font-weight: 600; color: #333; line-height: 80rpx;">{{zyinfo.date}}
					</view>
				</view>
				<view class="flx rr_style">
					<view class="zy_header_left">余额：</view>
					<view style="font-size: 32rpx; font-weight: 600; color: #333; line-height: 80rpx;">￥<span
							style="color:#66cc00;">{{zyinfo.money}}</span>元</view>
				</view>
				<view class="flx rr_style">
					<view class="zy_header_left">状态：</view>
					<view style="font-size: 25rpx; color: #0066ff; line-height: 80rpx;">{{zyinfo.status}}</view>
				</view>
				<view class="flx rr_style">
					<view class="zy_header_left">已花费：</view>
					<view style="font-size: 25rpx; line-height: 80rpx;">￥{{zyinfo.hufei}}元</view>
				</view>
			</view>
		</view>
		<view class="bottom_">
			<view class="bottom_s">
				<view class="bottom_s_header">本次缴纳</view>
				<view class="flx">
					<view class="moneyStyle">1000元</view>
					<view class="moneyStyle">2000元</view>
					<view class="moneyStyle">5000元</view>
					<view class="moneyStyle">10000元</view>
				</view>
				<view class="flx1" style="margin-top:35rpx;">
					<view style="font-size: 30rpx;">其他金额</view>
					<view>
						<input style="border-bottom: 1rpx solid #cecece; width: 150%; margin-left: 20rpx;" v-model="jine"/>
					</view>
				</view>
				<view style="width: 100%; height: 100rpx;"></view>
				<view class="button" @click="ljjn">立即缴纳</view>
				<view style="width: 100%; height: 58rpx;"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NarBar.vue'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				jine:'',
				zyinfo: {
					date: '2023-02-02 13:22',
					money: '1023.22',
					status: '正常',
					hufei: '2321.23'
				},
				userinfo:{
					name:'张三三',
					sex:'女',
					age:'34',
					number:'2323132'
				}
			}
		},
		methods:{
			ljjn(){
				uni.navigateTo({
					url:'/pages/HospitalizationServices/PaymentSuccessful'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.zy {
		width: 100%; 
		background-color: #fff;
		border:solid 1rpx #cecece;
		.zy_header {
			line-height: 80rpx;
			border-bottom: solid 1rpx #c0c0c0c0;
			font-size: 28rpx;
		}

		.rr_style {
			line-height: 80rpx;
			border-bottom: 1rpx solid #f5f5f5;
			.zy_header_left {
				width: 24%;
				font-size: 28rpx;
				text-align: end;
				// line-height: 30rpx;
			}
		}
	}
	.bottom_{
		background-color: #fff;
		border:solid 1rpx #cecece;
		margin-top:30rpx;
		.bottom_s{
			width: 90%;
			margin:0 auto;
			
			.bottom_s_header{
				line-height: 80rpx;
				border-bottom:  1rpx solid #f5f5f5;
				font-size: 30rpx;
			}
			.moneyStyle{
				width: 120rpx;
				height: 55rpx;
				border: 1rpx solid #333;
				font-size: 25rpx;
				text-align: center;
				line-height: 55rpx;
				margin-top:20rpx;
			}
		}
	}
	
	.button{
		width: 85%;
		margin:0 auto;
		background-color: #ffcc33;
		line-height: 80rpx;
		color: #fff;
		text-align: center;
		letter-spacing: 1rpx;
		border-radius: 45rpx;
		font-size: 28rpx;
	}
</style>